<template>
    <div class="records-container" :style="{'height':height,'min-height':minHeight}">
        <div class="records-main">
            
            <div class="records-item-main" v-for="(data,index) in dataList" :key="index">
                <div class="records-item" @click="optionItem(data)">
                    <!-- 插槽 -->
                    <slot name="row" :row="data">
                        <div class="item-info">
                            <div class="item-tite text-display-a-line">{{ data.title }}</div>
                                <div class="">
                                    <div style="height: 30px;line-height: 30px;color: #999;">作者：<span>{{ data.authorName }}</span></div>
                                    <div style="height: 30px;line-height: 30px;color: #999;">点赞： <span>{{ data.admireCount }}</span></div>
                                    <div style="height: 30px;line-height: 30px;color: #999;">评论：<span>{{ data.commentCount }}</span></div>
                                    <div style="height: 30px;line-height: 30px;color: #999;">状态： <span>{{ data.statusName }}</span></div>
                                    <div style="height: 30px;line-height: 30px;color: #999;">发布时间： <span>{{ data.createTime }}</span></div>
                                    
                                </div>
                           
                            
                        </div>
                        <div class="item-cover">
                            <el-image fit="cover" style="height: 156px;width: 200px;" :src="data.cover?data.cover:require('@/assets/7封面.png')"></el-image>
                        </div>
                    </slot>
                    
                </div>
                <div class="records-option">
                    <!-- 具名插槽 -->
                    <slot name="option" :row="data"></slot>
                </div>
                
                
            </div>
            
        </div>

    </div>
</template>

<script>
export default{
    data(){


        return{

        }
    },
    props:{
        dataList:{
            type:Array,
            default:[]
        },
        height:{
            type:String,
            default:"auto"
        },
        minHeight:{
            type:String,
            default:'auto'
        }
    },
    methods:{
        optionItem(record){
            this.$emit('record',record)
        }
    }
}

</script>

<style scoped>
.records-container{
    position: relative;
    
}
.records-main{
    
    background-color: #fff;
    
}
.item-info{
    width: 100%;
    
}
.records-item{
    /* width: 100%; */
    display: flex;
    /* border: 1px solid #999; */
    padding: 20px;
    /* justify-content: space-between; */
}
.records-item-main{

    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #dcdfe6;
    margin-bottom: 10px;

}
.records-item-main:hover{
    cursor: pointer;
    
}
.item-cover{
   height: 156px;
   line-height: 156px;
   display: flex;
   justify-content: center;
   align-items: center;
    /* width: 20%; */
}
.records-option{
    /* width: 100%; */
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    
}
.item-tite{
    text-align: left;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}
</style>